import React, {PureComponent} from 'react';
import {
	StyleSheet,
	View
} from 'react-native';
import {createStackNavigator, createBottomTabNavigator} from 'react-navigation';

import HomeScreen from './../home/Home';
import HomeDetailScreen from './../home/HomeDetail';
import MineScreen from './../mine/Mine';
import MoreScreen from './../more/More';
import ShopScreen from './../shop/Shop';
import TabBarItem from './TabBarItem';

/**
 * 创建主页栈
 */
const HomeStack = createStackNavigator({
	Home: HomeScreen,
	HomeDetail: HomeDetailScreen
});
/**
 * 创建更多栈
 */
const MoreStack = createStackNavigator({
	More: MoreScreen
});
/**
 * 创建我的栈
 */
const MineStack = createStackNavigator({
	Mine: MineScreen
});
/**
 * 创建商家栈
 */
const ShopStack = createStackNavigator({
	Shop: ShopScreen
});

const BottomTabNavigator = createBottomTabNavigator(
	// 配置页面
	{
		Home: HomeStack,
		Shop: ShopStack,
		Mine: MineStack,
		More: MoreStack
	},
	// 配置属性
	{
		navigationOptions: ({navigation}) => ({
			initialRouteName: '',
			tabBarIcon: ({focused, tintColor}) => {
				// 获取路由名称
				const {routeName} = navigation.state;
				switch (routeName) {
					// 主页
					case 'Home':
						return (
							<TabBarItem
								tintColor={tintColor}
								focused={focused}
								normalImage={require('./../../../../img/tab_home.png')}
								selectedImage={require('./../../../../img/tab_home_press.png')}
							/>
						);
					// 商家
					case 'Shop':
						return (
							<TabBarItem
								tintColor={tintColor}
								focused={focused}
								normalImage={require('./../../../../img/tab_message.png')}
								selectedImage={require('./../../../../img/tab_message_press.png')}
							/>
						);
					// 更多
					case 'More':
						return (
							<TabBarItem
								tintColor={tintColor}
								focused={focused}
								normalImage={require('./../../../../img/tab_find.png')}
								selectedImage={require('./../../../../img/tab_find_press.png')}
							/>
						);
					// 我的
					case 'Mine':
						return (
							<TabBarItem
								tintColor={tintColor}
								focused={focused}
								normalImage={require('./../../../../img/tab_mine.png')}
								selectedImage={require('./../../../../img/tab_mine_press.png')}
							/>
						);
				}
			},
			tabBarOptions: {
				// 选中指示器颜色
				activeTintColor: 'tomato',
				// 未选中
				inactiveTintColor: 'gray'
			}
		})
	}
);

/**
 * @FileName: Main
 * @Author: mazaiting
 * @Date: 2018/6/14
 * @Description:
 */
class Main extends PureComponent {
	static navigationOptions = {
		header: null
	};
	
	render() {
		return (
			<View style={styles.container}>
				<BottomTabNavigator />
			</View>
		)
	}
}

/**
 * 样式属性
 */
const styles = StyleSheet.create({
	container: {
		flex: 1,
		backgroundColor: '#DDD'
	}
});

/**
 * 导出当前Module
 */
module.exports = Main;